import React, { useState, useEffect } from 'react'
import Router from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import '../styles/header.css'
import servicePath from '../config/baseUrl'
import { Row, Col, Menu } from 'antd'
import { HomeOutlined, YoutubeOutlined, SmileOutlined } from '@ant-design/icons'

// import  * as Icon from '@ant-design/icons';
// var iconType = ['HomeOutlined', 'YoutubeOutlined', 'SmileOutlined']

const Header = () => {
  // 获取类别信息
  const [navArr, setNavArr] = useState([])
  useEffect(()=> {
    const fetchData = async() => {
      const result = await axios(servicePath.getTypeInfo)
        .then(resp => {
          // console.log(resp)
          setNavArr(resp.data.data)
          return resp.data.data
        })
      setNavArr(result)
    }
    fetchData()
  }, [])

  const handleClick = (e) => {
    if(e.key ===0) {
      Router.push('/index')
    } else {
      Router.push('/list?id='+e.key)
    }
  }
  return (
    <div className="header">
    <Row type="flex" justify="center">
        <Col xs={24} sm={24} md={10} lg={15} xl={12}>
            <span className="header-logo">小周</span>
            <span className="header-txt">今天也是雨天</span>
        </Col>

        <Col className="menu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
            <Menu mode="horizontal" onClick={handleClick}>
                {/* <Menu.Item key="0">
                  <HomeOutlined />
                  <Link href="/">首页</Link>
                </Menu.Item> */}
                {/* <Menu.Item key="video">
                  <YoutubeOutlined />
                    视频
                </Menu.Item>
                <Menu.Item key="life">
                  <SmileOutlined />
                    生活
                </Menu.Item> */}
                {
                  navArr.map((item) => {
                    return (
                      <Menu.Item key={item.id} >
                        <YoutubeOutlined/>
                        {item.typeName}
                      </Menu.Item>
                    )
                  })
                }
            </Menu>
        </Col>
    </Row>
  </div>
  )
}
export default Header